<template>
	<div class="app-container">
		<comprehensive-table @selection-change="selectionChange" :columns="column" :data="data" @reset="reset"
			@onSubmit="onSubmit">
			<template v-slot:btn>
				<div style="display: flex;justify-content: flex-end">
					<!-- <el-button type="primary" @click="add"><el-icon>
							<plus />
						</el-icon> 添加</el-button>
					<el-button type="danger" @click="batchDelete"><el-icon>
							<delete />
						</el-icon>删除</el-button> -->
				</div>
			</template>
			<template v-slot:sex="scope">{{scope.row.sex?'男':'女'}}</template>
			<template v-slot:operation="scope">
				<el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
					编辑
				</el-button>
				<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
					删除
				</el-button>
			</template>
		</comprehensive-table>

		<el-dialog :visible.sync="dialogVisible" :title="title" width="50%">
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
				:size="formSize">
				<el-form-item label="活动名称" prop="name">
					<el-input v-model="ruleForm.name" />
				</el-form-item>
				<el-form-item label="价格" prop="price">
					<el-input v-model="ruleForm.price" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="handleClose('ruleFormRef')">确定</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>
<script>
	import OrderApi from '@/common/finding/OrderApi.js';
	var dayjs = require('dayjs')
	import ComprehensiveTable from './components/comprehensive.vue'
	const data = []

	const column = [{
			name: 'flag',
			label: '序号',
			width: 40
		},

		{
			name: 'userId',
			label: '拾一块账号ID',
			inSearch: true,
			valueType: 'input',
			width: 100,
		},
		{
			name: 'userName',
			label: '姓名',
			inSearch: true,
			valueType: 'input',
			width: 80
		},
		{
			name: 'id',
			label: '订单编号',
			valueType: 'input',
			width: 160
		},
		{
			name: 'rubbishCategory',
			label: '回收物品类型',
			inSearch: true,
			valueType: 'input',
			width: 100
		},


		{
			name: 'shopAddress',
			label: '回收门店',
			valueType: 'input',
			width: 160
		},

		{
			name: 'recycleAddress',
			label: '预约上门地址',
			width: 180,
		},
		{
			name: 'scheduledTime',
			label: '上门时间',
			width: 180,
		},
		{
			name: 'maxWeight',
			label: '预估重量',
			valueType: 'input',
			width: 100
		},
		{
			name: 'price',
			label: '预估金额',
			valueType: 'input',
			width: 100
		},
		{
			name: 'remark',
			label: '备注信息',
			valueType: 'input',
			width: 260
		},


	]
	export default {
		components: {
			ComprehensiveTable
		},
		data() {
			return {
				data,
				column,
				formSize: 'default',
				ruleForm: {
					name: '',
					sex: null,
					price: null,
				},
				rules: {
					name: [{
							required: true,
							message: '请输入活动名称活动区域',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						},
					],
					price: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur'
					}, ],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: 'change',
					}, ],
				},
				dialogVisible: false,
				title: '新增',
				rowObj: {},
				selectObj: [],
			}
		},
		mounted() {
			OrderApi.queryAllOrder().then(res => {
				console.log('后台查询全部预约', res.data.data);
				this.data = res.data.data
				for (var i = 0; i < this.data.length; i++) {
					var price1 = this.data[i].minWeight * this.data[i].price
					var price2 = this.data[i].maxWeight * this.data[i].price
					this.data[i].price = price1 + '-' + price2 + '元'
					this.data[i].maxWeight = this.data[i].minWeight + '-' + this.data[i].maxWeight + 'kg'
					this.data[i].flag = i + 1
					if (this.data[i].remark == '') {
						this.data[i].remark = '无'
					}

				}


			})
		},
		methods: {
			async handleClose(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (valid) {
							let obj = {
								id: Date.now(),
								...this.ruleForm,
								age: 0,
								city: '普陀区',
								address: '上海市普上海',
								zip: 200333,
								province: '上海',
								admin: "admin",
								date: dayjs().format('YYYY-MM-DD')
							}
							if (this.title === '新增') {
								this.data = [obj, ...this.data]
								this.$message.success('添加成功')
							} else {
								this.data.forEach(item => {
									if (item.id === this.rowObj.id) {
										item.name = obj.name
										item.sex = obj.sex
										item.price = obj.price
									}
								})
							}
							this.dialogVisible = false
							console.log('submit!', obj)
						} else {
							console.log('error submit!', fields)
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			add() {
				this.title = '新增'
				this.dialogVisible = true
			},
			batchDelete() {
				if (!this.selectObj.length) {
					return this.$message.error('未选中任何行')
				}
				this.$confirm(
						'你确定要删除选中项吗?',
						'温馨提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
							draggable: true,
						}
					)
					.then(() => {

						this.$message.success('模拟删除成功')
						this.data = this.data.concat([])
					})
					.catch(() => {

					})
			},
			selectionChange(val) {
				this.selectObj = val
			},
			edit(row) {
				this.title = '编辑'
				this.rowObj = row
				this.dialogVisible = true
				this.ruleForm.name = row.name
				this.ruleForm.sex = row.sex
				this.ruleForm.price = row.price
			},
			del(row) {
				this.$confirm(
						'你确定要删除当前项吗?',
						'温馨提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
							draggable: true,
						}
					)
					.then(() => {
						this.data = this.data.filter(item => item.id !== row.id)
						this.$message.success('删除成功')
					})
					.catch(() => {

					})
			},
			reset() {
				this.$message.success('触发重置方法')
			},
			onSubmit() {
				this.$message.success('触发查询方法')
			}
		}
	}
</script>
<style scoped>
	.edit-input {
		padding-right: 100px;
	}

	.cancel-btn {
		position: absolute;
		right: 15px;
		top: 10px;
	}
</style>